<!DOCTYPE html>
<html lang="en">
	<head>
		<script>
			var doc = document.documentElement;
			doc.ondragover = function() {
				this.className = 'hover';
				return false;
			};
			doc.ondragend = function() {
				this.className = '';
				return false;
			};
			doc.ondrop = function(event) {
				event.preventDefault && event.preventDefault();
				this.className = '';
				var file = event.dataTransfer.files;
				return false;
			};
			//test for drag and drop capability

			var dndsupported = function() {
				var div = document.createElement('div');
				return ('draggable' in div) || ('ondragstart' in div && 'ondrop' in div);
			};

			if (!dndsupported) {
				document.getElementById('upload').onchange = function(event) {
					var files = this.files;
				};
			}
			var formData = new FormData();
			for (var i=0; i < files.length; i++) {
				formData.append('file', files[i]);
			}
			
			var xhr = new XMLHttpRequest();
			xhr.open('POST', '/upload.php');
			xhr.onload = function () {
				if (xhr.status === 200){
					console.log('all done:' + xhr.status);
				}
				else {
					console.log('uh oh..');
				}
			};
			xhr.send(formData);
			
			xhr.upload.onprogress = function (event){
				if(event.lengthComputable){
					var complete = (event, loaded / event.total * 100 | 0);
					progress.value = progress.innerHtml = complete;
				}
			};
			
			xhr.onload = function (){
				progress.value = progress.innerHtml = 100;
			};
			
			//rendering a preview
			var acceptedTypes = {
				'image/png': true,
				'image/jpg': true,
				'image/gif': true
			};
			
			if (acceptedTypes[file.type] === true) {
				var reader = new FileReader();
				reader.onload = function (event) {
					var image = new image();
					image.src = event.target.result;
					image.width = 100;
					document.body.appendChild(image);
								};
								reader.readAsDataURL(file);
			}
			
		</script>
	</head>
	<body>
		<div>
			<header>
				<h1>html5doc</h1>
			</header>
		</div>
	</body>
</html>
